<template>
	<view>
		<dsl-navbar title="好友列表" bgTopImg="white" isBack></dsl-navbar>
		<view>
			<view class="flex justify-between align-center solid-bottom padding" @click="messageTop()">
				<view class="flex align-center">
					<image src="/static/message/ingshenqing.png" mode="" class="square_image" style="border-radius: 0;">
					</image>
					<view class="margin-left">
						<view class="square_name one_overflow">好友申请</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between align-center solid-bottom padding" v-for="(item,index) in 3" :key='index'>
				<view class="flex align-center">
					<image src="https://img0.baidu.com/it/u=2783242076,3911860021&fm=26&fmt=auto" mode="aspectFill"
						class="square_image"></image>
					<view class="margin-left">
						<view class="square_name one_overflow">希希仙女希希仙女希希仙女希希仙女希希仙女</view>
						<view class="square_classify one_overflow margin-top-sm">
							地区地区地区地区地区地区地区
						</view>
					</view>

				</view>
				<view>
					<view class="align-center">
						<text class="square_time">1小时前</text>
						<image src="/static/message/imgxiangji-1.png" mode="" class="square_icon"></image>
						<image src="/static/square/imgxiaoxi-4.png" mode="" class="square_icon margin-left"></image>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods:{
			messageTop(){
				uni.navigateTo({
					url:'/pages/message/chatApply'
				})
			}
		}
	}
</script>

<style>
	/* 广场 */
	.square_image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}

	.square_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.square_name {
		width: 308rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.square_classify {
		width: 308rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #B7BED8;
		opacity: 1;
	}

	.square_time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9AA2B5;
		opacity: 1;
		margin-right: 20rpx;
	}

	view {}
</style>
